<template>
  <div>{{ mapData.name }} - {{ mapPose.name }}</div>
</template>

<script>
import { useAPIStore } from "stores/api/index.js";
import { api } from "boot/axios.js";
import { onMounted, ref, watch, computed } from "vue";

export default {
  name: "MapPoseTd",
  props: {
    poseId: String,
  },
  setup(props) {
    const mapPose = ref({});

    function getMapPose() {
      if (["", null].includes(props.poseId)) return;
      api
        .get(useAPIStore().mapUrl + "mapPose/id/" + props.poseId)
        .then((rs) => {
          mapPose.value = rs.data;
        });
    }

    const mapData = ref({});
    const mapId = computed(() => mapPose.value.mapID);
    watch(mapId, (value) => {
      api.get(useAPIStore().mapUrl + "map/id/simple/" + value).then((rs) => {
        mapData.value = rs.data;
      });
    });

    onMounted(getMapPose);

    return {
      mapPose,
      mapData,
    };
  },
};
</script>
